<template>
<view class="container">
	<!-- 顶部轮播 -->
	<view class="subject-banner"
		@click="onPlay({ id: 1 })">
		<swiper class="swiper-view"
			autoplay
			circular
			skip-hidden-item-layout
			indicator-dots
			indicator-color="#FFFFFF"
			indicator-active-color="#007AFF"
			:interval="2000"
			:duration="500">
			<swiper-item style="overflow-y: auto;">
				<image class="swiper-view--image"
					:src="detail && detail.cover && detail.cover.middle"
					mode="aspectFill" />
			</swiper-item>
		</swiper>
		<!-- 遮罩层 -->
		<view class="subject-banner-mask">
			<image class="subject-banner-image"
				src="/static/v2_q9wlm9.png"
				mode="aspectFill" />
		</view>
	</view>
	<!-- Tab -->
	<view class="tab-view">
		<view class="tab-view-item"
			:id="0"
			:data-current="0"
			:class="{ 'active': active == 'brief' }"
			@click="onTabClick('brief')">
			<text class="tab-view-item--text">课程介绍</text>
		</view>
		<view class="tab-view-item"
			:id="1"
			:data-current="1"
			:class="{ 'active': active == 'catalog' }"
			@click="onTabClick('catalog')">
			<text class="tab-view-item--text">课程目录</text>
		</view>
		<view class="tab-view-item"
			:id="2"
			:data-current="2"
			:class="{ 'active': active == 'resource' }"
			@click="onTabClick('resource')">
			<text class="tab-view-item--text">学习资料</text>
		</view>
	</view>
	<!-- 主体 -->
	<swiper :current="tabIndex"
		class="swiper-box detail-white"
		style="flex: 1;"
		:duration="300"
		@change="onSwiperChange">
		<!-- 课程介绍 -->
		<swiper-item class="swiper-item">
			<!-- 课程介绍 -->
			<view class="section-header">
				<view class="section-title">课程介绍</view>
			</view>
			<view class="detail-content">
				<view class="text-primary" style="font-size: 30rpx;">{{ detail.title }}</view>
				<view class="text-custom">{{ detail.subtitle }}</view>
			</view>
			<view v-if="detail.summary" class="detail-content">
				<rich-text :nodes="detail.summary" />
			</view>
			<view v-else class="empty-text">还没有课程介绍哦～</view>
			<!-- 讲师 -->
			<view class="section-header">
				<view class="section-title">讲师</view>
			</view>
			<view class="detail-content">
				<view class="list-card">
					<image class="list-card-cover border-radius"
						:src="teachers && teachers.avatar && teachers.avatar.middle"
						mode="aspectFill" />
					<view class="list-card-content">
						<view class="list-card-info sec-left">
							<view class="list-card-title">{{ teachers && teachers.nickname }} 讲师</view>
							<view class="list-card-subtitle">
								<rich-text :nodes="teachers && teachers.about" />
							</view>
						</view>
					</view>
				</view>
			</view>
		</swiper-item>
		<!-- 课程目录 -->
		<swiper-item class="swiper-item">
			<uni-collapse>
				<uni-collapse-item v-for="item in columnList"
					:key="item.id"
					:title="item.title"
					show-animation>
					<view class="detail-content">
						<view class="task-item-info"
							@click="onItemPlay({ id: 1 })">
							<view class="task-item-type">
								<text class="iconfont icon-play large"></text>
							</view>
							<view class="task-item-describe sec-left">
								<view class="task-item-date">
									<text>1.1 计算机基本原理</text>
								</view>
								<view class="task-item-author">
									<text>50:03</text>
									<text class="sec-left">已学</text>
									<text class="sec-left text-primary">56%</text>
								</view>
							</view>
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
			<view class="empty-text sec-top">已经到底啦～</view>
		</swiper-item>
		<!-- 学习资料 -->
		<swiper-item class="swiper-item">
			<!-- 视频资料 -->
			<view class="section-header border">
				<view class="section-title">
					<text class="iconfont icon-video middle"></text>
					<text class="sec-left">视频资料</text>
				</view>
			</view>
			<view class="detail-content"
				v-if="mp4List.length">
				<view class="resource-item sec-top"
					v-for="item in mp4List"
					:key="item.id">
					<video class="resource-item-cover"
						id="myVideo"
						:src="baseURL + '/' + item.hashId"
						@error="videoErrorCallback"
						controls>
					</video>
					<view class="resource-item-text">
						<text>{{ item.filename }}</text>
						<text class="iconfont icon-download middle"
							@click="onDownload('video', item)"></text>
					</view>
				</view>
			</view>
			<view v-else class="empty-text">还没有上传哦～</view>
			<!-- PPT资料 -->
			<view class="section-header border">
				<view class="section-title">
					<text class="iconfont icon-ppt middle"></text>
					<text class="sec-left">PPT资料</text>
				</view>
			</view>
			<view class="detail-content"
				v-if="pptList.length">
				<view class="resource-item sec-top"
					v-for="item in pptList"
					:key="item.id">
					<view class="resource-item-container"
						@click="onPlay(item)">
						<image class="resource-item-cover"
							:src="baseURL + '/' + item.hashId" 
							mode="aspectFill" />
						<view class="resource-item-mask">
							<text class="iconfont icon-play"
								style="font-size: 56px; color: #666666;"></text>
						</view>
					</view>
					<view class="resource-item-text">
						<text>{{ item.filename }}</text>
						<text class="iconfont icon-download middle"
							@click="onDownload('ppt', item)"></text>
					</view>
				</view>
			</view>
			<view v-else class="empty-text">还没有上传哦～</view>
			<!-- 文档资料 -->
			<view class="section-header border">
				<view class="section-title">
					<text class="iconfont icon-folder middle"></text>
					<text class="sec-left">文档资料</text>
				</view>
			</view>
			<view class="detail-content sec-top"
				v-if="documentList.length">
				<uni-grid :column="2"
					:showBorder="false"
					:square="false">
					<uni-grid-item v-for="item in documentList"
						:key="item.id">
						<view class="task-item-info"
							@click="onDownload('others', item)">
							<view class="task-item-type">
								<image class="list-card-cover"
									:src="'/static/' + item.ext + '.png'"
									mode="aspectFill" />
							</view>
							<view class="task-item-date sec-left">
								<text>{{ item.filename }}</text>
							</view>
						</view>
					</uni-grid-item>
				</uni-grid>
			</view>
			<view v-else
				class="empty-text sec-top">还没有上传学习资料哦～</view>
		</swiper-item>
	</swiper>
	<!-- 底部操作 -->
	<view class="shim"></view>
	<view class="fixed-action bottom">
		<view class="fixed-action-item">
			<text class="iconfont icon-comment large"
				@click="onActionClick('faq')"></text>
		</view>
		<view class="fixed-action-item">
			<text class="iconfont icon-edit large"
				@click="onActionClick('record')"></text>
		</view>
		<view class="fixed-action-item">
			<view class="btn btn-primary large"
				@click="onActionClick('live')">
				<text class="iconfont icon-share"></text>
				<text class="sec-left">加入学习</text>
			</view>
		</view>
	</view>
</view>
</template>

<script>
import { getCourseDetail, getCourseItems, getcoursefile, postCourseMember, getDownloadFile } from '@/api/index.js';
const baseURL = 'http://edu.ypywh.com';
export default {
	data() {
		return {
			active: 'brief',
			tabIndex: 0,
			tabs: ['brief', 'catalog', 'resource'],
			id: null,
			detail: {},
			teachers: {},
			mp4List: [],
			pptList: [],
			documentList: [],
			baseURL,
			columnList: []
		}
	},
	onLoad(data) {
		this.id = data.id;
	},
	onShow() {
		const token = uni.getStorageSync('X-Auth-Token');
		if (!token) {
			uni.navigateTo({
				url: '/pages/login/login'
			});
		}
		getCourseDetail(this.id).then(res => {
			this.detail = res.data;
			this.teachers = res.data && res.data.teachers[0];
		})
		
		getCourseItems(this.id).then(res => {
			this.columnList = res.list || [];
		})
		
		getcoursefile(this.id).then(res => {
			let list = res.list || [];
			this.mp4List = list.filter(item => item.type == 'video');
			this.pptList = list.filter(item => item.type == 'image');
			this.documentList = list.filter(item => item.type == 'document');
		})
	},
	methods: {
		onPlay(item) {
			
		},
		onDownload(type, item) {
			switch(type) {
				case 'video':
					break;
				case 'ppt':
					break;
				default:
					getDownloadFile(item.id);
					break;
			}
		},
		videoErrorCallback() {},
		onItemPlay(item) {
			uni.navigateTo({
				url: `/pages/subject/live?id=${ item.id }&from=subject-detail`
			})
		},
		onTabClick(type) {
			this.active = type
			switch(type) {
				case 'catalog':
					this.tabIndex = 1;
					break;
				case 'resource':
					this.tabIndex = 2;
					break;
				default:
					this.tabIndex = 0;
					break;
			}
		},
		onSwiperChange(e) {
			const index = e.target.current || e.detail.current;
			this.tabIndex = index;
			this.active = this.tabs[index];
		},
		onActionClick(type) {
			switch(type) {
				case 'live':
					postCourseMember(this.detail.id).then(res => {
						// TODO
					})
					break;
				default:
					uni.navigateTo({
						url: `/pages/${ type }/${ type }?id=${ this.detail.id }&from=subject-detail`
					});
					break;
			}
		}
	}
}
</script>
